<template>
  <!-- 饼状图&柱状图 -->
  <div :id="moduleName" class="box"></div>
</template>
<script>
export default {
  props: {
    moduleName: {
      type: String
    },
    // 标题内容
    titleText: {
      type: String
    },
    pieData: {
      type: Object,
    }
  },
  watch: {
    pieData: {
      handler(newVal) {
        console.log('newVal',newVal)
        for(let key in newVal) {
          this.histogram[key] = newVal[key].lowPercent70StationCount
        }
        console.log(',,,,',this.histogram)
      },
      immediate: true
    },
    histogram: {
      handler(newVal) {
        console.log('histogram12333',newVal)
      }
    }
  },
  name: 'PieBar',
  data () {
    return {
      // 柱形图数据
      histogram: {}
    }
  },
  computed: {
    lowPercent70: function () {
      return this.computeBarData('lowPercent70StationCount')
    },
    bw70: function () {
      return this.computeBarData('betweenPercent70To80StationCount')
    },
    bw80: function () {
      return this.computeBarData('betweenPercent80To90StationCount')
    },
    high90: function () {
      return this.computeBarData('highPercent90StationCount')
    }
  },
  mounted () {
    console.log(this.moduleName+'123',this.pieData)
    // debugger
    this.drawPie()
  },
  methods: {
    drawPie () {
      // 基于准备好的dom，初始化echarts实例
      // 注意，此处使用$echarts和$echarts5效果不一样，跟echarts版本有关
      const myChart = this.$echarts5.init(document.getElementById(this.moduleName))
      // 绘制图表
      const option = {
        title: [
          {
            subtext: this.titleText,
            subtextStyle: {
              fontSize: 15,
              align: 'center'
            },
            top: '40%',
            left: '26.5%'
          },
          {
            subtext: '单位：个',
            subtextStyle: {
              fontSize: 16
            },
            left: '80%'
          }
        ],
        color: ['#7ecef4','#3accea','#497ff8','#3aa0fe'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '88%',
          left: 'left'
        },
        yAxis: {
          type: 'value',
          show: false
        },
        xAxis: {
          type: 'category',
          show: false
        },
        grid: {
          height: '40%',
          top: '30%',
          left: '70%'
        },
        series: [
          {
            name: '合格率统计',
            type: 'pie',
            top: '-10%',
            right: '30%', // 环形图左右偏移
            radius: ['50%', ' 70%'],
            avoidLabelOverlap: false,
            emphasis: {
              itemStyle: {
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10
              }
            },
            labelLine: {
              show: true,
              length2: 50
            },
            label:{
              formatter:"{c}个\n\n",
              padding:[0,-35]
            },
            data: [
              { value: this.high90, name: '>90%' },
              { value: this.bw80, name: '80%-90%' },
              { value: this.bw70, name: '70%-80%' },
              { value: this.lowPercent70, name: '<70%' }
            ]
          }
        ]
      }

      if(this.pieData) {
        for(let key in this.pieData){
          let name = ''
          let color1 = ''
          let color2 = ''
          let barBorderRadius = ''
          let data = ''
          if(key == 'windStation') {
            name = '风电'
            color1 = 'rgba(250,190,2,0.5)'
            color2 = '#fabe02'
            data = this.histogram[key]
            if(this.pieData.tsStation){
              barBorderRadius = [0,0,0,0]
            }else {
              barBorderRadius = [0,0,10,10]
            }
          }else if(key == 'pvStation') {
            name = '光伏'
            color1 = 'rgba(51,214,142,0.5)'
            color2 = '#33d68e'
            barBorderRadius = [10,10,0,0]
            data = this.histogram[key]
          }else if(key == 'tsStation') {
            name = '变电站'
            color1 = 'rgba(76,129,248,0.5)'
            color2 = '#4c81f8'
            barBorderRadius = [0,0,10,10]
            data = this.histogram[key]
          }
          option.series.push({
            name: name,
            type: 'bar',
            stack: 'total',
            barWidth: 50,
            label: {
              show: true,
              color: '#fff'
            },
            itemStyle: {
              normal: {
                barBorderRadius: barBorderRadius,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: color1
                  },
                    {
                      offset: 1,
                      color: color2
                    }
                  ]
                }
              }
            },
            data: [data]
          })

        }
      }
      // 柱图白色分隔
      let barData = []
      if(this.moduleName == 'meteorologicalData'){
        barData = [
          this.histogram.windStation
        ]
      }else if(this.moduleName == 'equipmentAccount'){
        barData = [
          this.histogram.tsStation,
          this.histogram.windStation+this.histogram.tsStation
        ]
      }
      barData.forEach((item) => {
        option.series.push({
          name:'',
          type: "pictorialBar",
          stack: 'fenge',
          symbol: 'rect',
          symbolSize: [50,4],
          symbolOffset: [0, -2],
          z: 12,
          itemStyle: {
            color:(params)=>{
              console.log(params)
              return '#fff'
            },
          },
          tooltip:{
            show:false
          },
          symbolPosition: "end",
          data: [item],
        })
      })

      // 中间部分
      option.series.push({
        name: '中间部分',
        type: 'pie',
        top: '-10%',
        right: '30%', // 环形图左右偏移
        radius: ['0', ' 40%'],
        avoidLabelOverlap: false,
        itemStyle: {
          normal: {
            color: '#e5f5fc'
          }
        },
        data: [100],
        emphasis: {
          itemStyle: {
            color: '#e5f5fc'
          }
        }
      })
      myChart.setOption(option, true)
      window.addEventListener('resize', () => { myChart.resize() })
      myChart.on('mouseover', { seriesIndex: 0 }, (params) => {
        console.log('params',params)
        let mapping = {
          '>90%': 'highPercent90StationCount',
          '80%-90%': 'betweenPercent80To90StationCount',
          '70%-80%': 'betweenPercent70To80StationCount',
          '<70%': 'lowPercent70StationCount'
        }
        if(this.moduleName == 'meteorologicalData'){
          option.series[1].data = [this.pieData.windStation[mapping[params.name]]]
          option.series[2].data = [this.pieData.pvStation[mapping[params.name]]]
          option.series[3].data = [this.pieData.windStation[mapping[params.name]]]
        }else if(this.moduleName == 'equipmentAccount'){
          option.series[1].data = [this.pieData.tsStation[mapping[params.name]]]
          option.series[2].data = [this.pieData.windStation[mapping[params.name]]]
          option.series[3].data = [this.pieData.pvStation[mapping[params.name]]]
          option.series[4].data = [this.pieData.tsStation[mapping[params.name]]]
          option.series[5].data = [this.pieData.windStation[mapping[params.name]]+this.pieData.tsStation[mapping[params.name]]]
        }
        console.log('option',option)
        myChart.setOption(option, true) // 重新渲染
      })
    },
    computeBarData(name) {
      let total = 0
      if(this.pieData) {
        for(let key in this.pieData){
          total += this.pieData[key][name]
        }
      }
      return total
    }
  }
}
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 400px;
  // background-color: #8df;
}
</style>
